{% extends "base2.html" %}
{% block title %}
flickrforsalaryman - {{photo.title}}
{% endblock %}
{% block content %}
<div class="post col2" id="photo" style="margin: 0px 5px 10px 5px; ">
	<div>
  	<a href="/photos/{{photo.username}}/{{photo.id}}">
		<img src="https://www-gm-opensocial.googleusercontent.com/gadgets/proxy/refresh=3600&container=gm&gadget=http%3A%2F%2Fwww.google.com%2Fig%2Fmodules%2Fgm%2Fphotos%2Fcard-flickr.xml/http://farm{{photo.farm}}.static.flickr.com/{{photo.server}}/{{photo.id}}_{{photo.secret}}_z.jpg" />
  		<!--<img src="http://farm{{photo.farm}}.static.flickr.com/{{photo.server}}/{{photo.id}}_{{photo.secret}}_z.jpg" />-->
  	</a>
  	</div>
</div>
<div class="post col1" id="text">
	<h2>{{photo.title}}</h2>
	<p>{{photo.description}}</p>
	<p>by <a href="/photos/{{photo.nsid}}" >{{photo.ownername}}</a> on <a href="{{photo.url}}" >{{photo.date}} {{photo.time}}</a></p>
</div>
<div class="post col1" id="text">	
	<h2>Stats</h2> 
	Views: {{photo.views}} Comments: {{comments|length}}
</div>
{% if photo.exif %}
<div class="post col1" id="text">	
	<h2><a href="{{photo.url}}meta">Exif</a></h2>
	{{photo.exif}}	
</div>
{% endif %}
{% if photo.location %}
<div class="post col1" id="text">
	<h2>Location</h2> 
	{{photo.location}}	
</div>
{% endif %}
{% if photo.tags %}
<div class="post col1" id="text">
	<h2>Tags</h2> 
	{{photo.tags}}	
</div>
{% endif %}
{% if userprefs.token %}
<div class="post col1" id="text">
	<textarea id="commentbox">Add comments</textarea>
	<br/>
	<input type="button" id="commentbutton" value="post" />
	<script	type="text/javascript">
	$(function(){
		$('#commentbox').focus(function(){			
			if($('#commentbox').val() == 'Add comments')
				$('#commentbox').val('');
		})
		$('#commentbutton').click(function(){
			$('#commentbox').attr('disabled', 'true');
			
			$.post("/comment/", { comment: $('#commentbox').val(), photoid: '{{photo.id}}' },
				function(data){
					$('#commentbox').val(data);
				});
		});
	});
	</script>	
</div>
{% endif %}
{% for comment in comments %}
<div class="post col1" id="text">
	<a href="/photos/{{comment.author}}" rel="nofollow" onclick="" style="clear: left; float: left; margin-bottom: 1px; margin-right: 3px;">
		<img src="https://www-gm-opensocial.googleusercontent.com/gadgets/proxy/refresh=3600&container=gm&gadget=http%3A%2F%2Fwww.google.com%2Fig%2Fmodules%2Fgm%2Fphotos%2Fcard-flickr.xml/http://flickr.com/buddyicons/{{comment.author}}.jpg" width="48" height="48" alt="" title="{{comment.authorname}}">
		<!--<img src="http://flickr.com/buddyicons/{{comment.author}}.jpg" width="48" height="48" alt="" title="{{comment.authorname}}">-->
	</a>
	<a href="/photos/{{comment.author}}" title="{{comment.datecreate}}" rel="nofollow">{{comment.authorname}}</a>
	<p>
	{{comment.body}}
	</p>
</div>
{% endfor %}
<script	type="text/javascript">		
	$(function(){
		//run masonry when page first loads
		$(window).load(function() {
			$('.posts').masonry({ columnWidth: 1 });
			animate: false
		});
	})
</script>
{% endblock %}